<template>
  <div class="status-tables">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never" class="table-card">
            <template slot="header">
              <div class="table-header" style="display: flex; justify-content: space-between; align-items: center;">
                <span>节点状态</span>
                <el-button type="text" icon="el-icon-s-grid">查看全部</el-button>
              </div>
            </template>
            <el-table :data="safeNodes" style="width: 100%" height="300">
              <el-table-column prop="name" label="节点名称" width="180">
                <template slot-scope="{ row }">
                  <div class="node-info">
                    <i class="el-icon-cpu"></i>
                    <span>{{ safeGet(row, 'name', '') }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="120">
                <template slot-scope="{ row }">
                  <el-tag :type="getNodeStatusType(safeGet(row, 'status', ''))" size="small">
                    {{ safeGet(row, 'status', '') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="os" width="150">
                <template slot-scope="{ row }">
                  <el-tag type="primary" size="small">
                    {{ safeGet(row, 'os', '') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="ip地址" width="150">
                <template slot-scope="{ row }">
                  <el-tag type="info" size="small">
                    {{ safeGet(row, 'ip', '') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="kubelet" width="150">
                <template slot-scope="{ row }">
                  <el-tag type="primary" size="small">
                    {{ safeGet(row, 'kubelet', '') }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never" class="table-card">
            <template slot="header">
              <div class="table-header" style="display: flex; justify-content: space-between; align-items: center;">
                <span>Pod状态</span>
                <div style="display: flex; align-items: center;">
                  <el-input 
                    v-model="podFilter" 
                    placeholder="搜索Pod名称" 
                    size="small" 
                    style="width: 200px; margin-right: 10px"
                    clearable
                  >
                    <template slot="prefix">
                      <i class="el-icon-search"></i>
                    </template>
                  </el-input>
                  <el-button type="text" icon="el-icon-s-grid">查看全部</el-button>
                </div>
              </div>
            </template>
            <el-table :data="safeFilteredPods" style="width: 100%" height="300">
              <el-table-column prop="name" label="Pod名称">
                <template slot-scope="{ row }">
                  <div class="pod-info">
                    <i class="el-icon-box"></i>
                    <span>{{ safeGet(row, 'name', '') }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="namespace" label="命名空间" width="100"></el-table-column>
              <el-table-column label="状态" width="100">
                <template slot-scope="{ row }">
                  <el-tag :type="getPodStatusType(safeGet(row, 'status', ''))" size="small">
                    {{ safeGet(row, 'status', '') }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column label="重启次数" width="80" prop="restarts"></el-table-column>
              <el-table-column label="运行时间" width="100" prop="age"></el-table-column>
              <el-table-column label="操作" width="140">
                <template slot-scope="{ row }">
                  <el-button type="text" size="small" @click="showPodDetails(row)">详情</el-button>
                  <el-button type="text" size="small" @click="showPodLogs(row)">日志</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script>
export default {
  name: 'ResourceMonitor',
  
  props: {
    // 从父组件传递的节点数据
    nodes: {
      type: Array,
      default: () => []
    },
    // 从父组件传递的Pod数据
    pods: {
      type: Array,
      default: () => []
    },
    
  },
  
  data() {
    return {
      // Pod搜索过滤条件
      podFilter: ''
    };
  },
  
  computed: {
    // 计算属性 - 过滤后的Pod列表
    filteredPods() {
      try {
        if (!this.podFilter) return this.safeGet(this, 'pods', []);
        const pods = this.safeGet(this, 'pods', []);
        return pods.filter(pod => 
          this.safeGet(pod, 'name', '').toLowerCase().includes(this.podFilter.toLowerCase())
        );
      } catch (error) {
        console.error('过滤Pod列表时出错:', error);
        this.$message.error('过滤Pod列表时发生错误');
        return [];
      }
    },
    
    // 安全的节点数据
    safeNodes() {
      try {
        return this.safeGet(this, 'nodes', []);
      } catch (error) {
        console.error('获取节点数据时出错:', error);
        return [];
      }
    },
    
    // 安全的过滤后Pod数据
    safeFilteredPods() {
      try {
        return this.filteredPods;
      } catch (error) {
        console.error('获取过滤后Pod数据时出错:', error);
        return [];
      }
    }
  },
  
  methods: {
    // 安全的数据访问方法
    safeGet(obj, path, defaultValue = null) {
      try {
        if (!obj || typeof obj !== 'object') return defaultValue;
        const keys = path.split('.');
        let result = obj;
        
        for (const key of keys) {
          if (result && typeof result === 'object' && key in result) {
            result = result[key];
          } else {
            return defaultValue;
          }
        }
        return result !== undefined ? result : defaultValue;
      } catch (error) {
        console.error(`安全访问属性 ${path} 时出错:`, error);
        return defaultValue;
      }
    },
    
    // 查看Pod详情
    showPodDetails(pod) {
      try {
        console.log('查看Pod详情:', pod);
        const podName = this.safeGet(pod, 'name', '未知Pod');
        this.$message.info(`查看Pod详情: ${podName}`);
        // 这里可以触发显示Pod详情的弹窗或跳转到详情页面
      } catch (error) {
        console.error('查看Pod详情时出错:', error);
        this.$message.error('查看Pod详情时发生错误');
      }
    },
    
    // 查看Pod日志
    showPodLogs(pod) {
      try {
        console.log('查看Pod日志:', pod);
        const podName = this.safeGet(pod, 'name', '未知Pod');
        this.$message.info(`查看Pod日志: ${podName}`);
        // 这里可以触发显示Pod日志的弹窗
      } catch (error) {
        console.error('查看Pod日志时出错:', error);
        this.$message.error('查看Pod日志时发生错误');
      }
    },
    
    // 获取节点状态类型
    getNodeStatusType(status) {
      try {
        switch (status) {
          case 'Ready': return 'success';
          case 'NotReady': return 'danger';
          case 'Unknown': return 'warning';
          default: return 'info';
        }
      } catch (error) {
        console.error('获取节点状态类型时出错:', error);
        return 'info';
      }
    },
    
    // 获取Pod状态类型
    getPodStatusType(status) {
      try {
        switch (status) {
          case 'Running': return 'success';
          case 'Pending': return 'warning';
          case 'Succeeded': return '';
          case 'Failed': return 'danger';
          case 'Unknown': return 'info';
          default: return '';
        }
      } catch (error) {
        console.error('获取Pod状态类型时出错:', error);
        return '';
      }
    }
  },
  
  watch: {
    // 监听父组件传递的数据变化
    nodes: {
      handler(newNodes) {
        try {
          console.log('节点数据更新:', newNodes);
        } catch (error) {
          console.error('监听节点数据变化时出错:', error);
        }
      },
      deep: true
    },
    
    pods: {
      handler(newPods) {
        try {
          console.log('Pod数据更新:', newPods);
        } catch (error) {
          console.error('监听Pod数据变化时出错:', error);
        }
      },
      deep: true
    }
  },
  
  mounted() {
    try {
      console.log('ResourceMonitor组件已挂载，接收到的数据:', {
        nodes: this.safeNodes,
        pods: this.safeFilteredPods
      });
    } catch (error) {
      console.error('组件挂载时出错:', error);
    }
  }
}
</script>

<style>
 .status-tables {
  margin-bottom: 20px;
}

.table-card {
  border-radius: 8px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #303133;
}
.node-info, .pod-info {
  display: flex;
  align-items: center;
}

.node-info i, .pod-info i {
  margin-right: 8px;
  font-size: 16px;
}

.node-info i {
  color: #1890ff;
}

.pod-info i {
  color: #52c41a;
}
</style>
